<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="js/md5.min.js"></script>

</head>
<body>
<style>
  html,body{
    margin: 0;
  }
  body{
    background:url('images/login_bg.jpg') #f2f2f2;
    background-size: 100%;

  }
  .content{
  }
  .box{
    background: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    width: 220px;
    padding:40px 60px;
    margin-top: 100px;
    border-top:3px solid #EF702E;
    border-radius: 4px;
    height: 180px;

  }
  .mt-input{
    color: #666;
    padding: 0 8px;
    line-height: 30px;
    font-size: 14px;
    display: block;
    width:200px;
    margin-bottom: 10px;
    border: 0;
    border-radius: 4px;
    background: #fff;


    outline: 0;
  }
  #mt-login{
    width: 60px;
    display: block;
    padding-top: 30px;
    margin: 20px auto;


  }
  .login{
    display: none;
  }
  #login{
    margin-top: 30px;
    background: #EF702E;
    width: 200px;
    color: #fff;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    padding:4px 8px;
    cursor: pointer;
  }
  #login:hover{
    background: #e96e2d;

  }
  #debug{
     display: none;
   }

</style>

<div class="content">
  <div class="box">
    <img id="mt-login" src="images/logo.png" alt="">
    <div class="login">
      <input id="debug" class="mt-input" type="text" value="https://mtapi.kq47.com/v1/bg_login">

      <!--<input id="debug" class="mt-input" type="text" value="https://api.maotukeji.com/v1/bg_login">-->
      <input id="name" class="mt-input" type="text" placeholder="请输入用户名">
      <input id="passwd" class="mt-input" type="password" placeholder="请输入密码">
      <!--<input id="rePasswd" class="mt-input" type="password" placeholder="再次输入密码">-->

      <div id="login">登录</div>
    </div>

  </div>

</div>

<script>
  function setCookies(data){
    // $.cookie('token', data.token, { expires: 7  ,path: '/',domain:'maotukeji.com'});

    // $.cookie('roles', data.roles, { expires: 7  ,path: '/',domain:'maotukeji.com'});
   $.cookie('token', data.token, { expires: 7  ,path: '/'});
   $.cookie('roles', data.roles, { expires: 7  ,path: '/'});
  };
  function login(data){
    var url =$('#debug').val();
    $.post(url, data,
      function(data){
        console.log(data); //  2pm
        if(data.result=='ok'){
          setCookies(data)

          setTimeout(function(){

            window.location.href='/#/statistics'

          },1000)
        }
    });
  };

  $(document).ready(function(){
    $('#mt-login').fadeOut(1000,function(){
      $('.login').fadeIn();
    });


    $('#login').click(function(){
      var data={};
      data.username=$('#name').val();
      data.password=md5($('#passwd').val());

      login(data);


    })


  })
</script>
</body>

</html>
